<template>
    <div class="waterfall">
        <div v-for="(v, index) in arr1" :key="index" class="box" @click="fun(v)">
            <div class="top">
                <img :src="v.img1" alt="">
            </div>
            <div>
                <div class="box1">{{ v.proname }}</div>
                <div class="box2">￥{{ v.originprice }}
                    <div class="box3">看相似</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import axios from "axios";
let service = axios.create();


export default {
    data() {
        return {
            arr1: [],
        }
    },
    methods: {
        fun(v) {
            // this.$router.push(`/goods/${v.proid}`)        //点击商品跳到商品详情
        }
    },
    mounted() {
        service({
            url: 'http://118.178.238.19:3001/api/pro/search',      //页面加载发请求
            methed: 'get'
        }).then(res => {
            this.arr1 = res.data.data
        })

    }

}
</script>

<style scoped>
.waterfall {
    display: flex;
    flex-wrap: wrap;
}

.waterfall {
    display: flex;
    justify-content: space-between;
    background: #EEE
}

.waterfall .box {
    width: 170px;
    margin: 6px;
    border-radius: 10px;
    background: #FFF;
    overflow: hidden;
    text-align: center;

}

.waterfall .top img {
    width: 160px;

}

.box1 {
    font-size: 14px;
    color: #434343;
}

.box2 {
    font-size: 14px;
    color: red;
    text-align: left;
}
.box3{
    width: 50px;
    float: right;
    background: #EEE;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 10px;
    text-align: center;
    color: #000;
}
</style>